<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>组件的定义使用</title>
  </head>
  <body>
    <template id="temp">
      <div>
        <ul>
          <li>{{msg}}</li>
          <li>{{num}}</li>
          <li>内容</li>
          <li>内容</li>
        </ul>
        <input type="button" value="点击+1" @click="add" />
      </div>
    </template>
    <div id="app">
      <div>
        <my-component></my-component>
        <third></third>
        <fourth></fourth>
        <zzz></zzz>
      </div>
    </div>
  </body>
  <script src="./js/vue.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
  <script>
    // 定义全局组件
    Vue.component("my-component", {
      template: "<div>这里是全局组件</div>"
    })

    Vue.component("third", {
      template: "<div>{{message}}</div>",
      data() {
        return {
          message: "组件内容"
        }
      }
    })

    Vue.component("fourth", {
      template: `
            <ul>
                <li>1</li>
                <li>1</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
            </ul>
        `
    })

    var Child = {
      template: "<div>私有组件内容</div>"
    }

    var app = new Vue({
      el: "#app",
      data: {},
      components: {
        zzz: {
          template: "#temp",
          data() {
            return {
              msg: "我是私有组件中的数据",
              num: 0
            }
          },
          methods: {
            add() {
              this.num++
            }
          }
        }
      }
    })
  </script>
  <!-- 面试题：
    在组件中的数据为什么要定义为函数形式？

    答：组件是用来复用的，在js中对象是引用类型。如果data是一个对象，那么这个对象的作用域就没有隔离
        子组件的data值会受到影响。
        2、如果data是一个函数，是一个封闭的空间。这个对象是独立的，组件之间不会受到影响。
--></html>
